import React, {useEffect, useState} from 'react';
import {Box, Button, Card, CardContent, CardHeader, Stack, Switch, Typography} from "@mui/material";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import ToggleButton from "@mui/material/ToggleButton";

import {getConfig, save} from "../../api/lesson/lesson-schedule-config";
import {alert} from "../common/alert";

import {Done, RestartAlt} from "@mui/icons-material";
import LoadingButton from "@mui/lab/LoadingButton";
import CircularProgress from "@mui/material/CircularProgress";

const HOUR_ARRAY = Array.from({length: 24}, (_, i) => i);

const HourBar = ({hours, onChange}) => {
    const [value, setValue] = useState([]);

    useEffect(() => {
        hours && hours.length && setValue(HOUR_ARRAY.filter(hour => hours[hour] === '1'));
    }, [hours]);

    return (
        <ToggleButtonGroup
            color="primary" value={value}
            onChange={(event, value) => {
                const newHours = Array(24).fill('0');
                value.length && value.forEach(v => newHours[v] = '1');
                onChange(newHours.join(''));
            }}>
            {HOUR_ARRAY.map(hour => <ToggleButton key={hour} value={hour}>{hour}</ToggleButton>)}
        </ToggleButtonGroup>

    );
}

function LessonScheduleConfig() {

    const [config, setConfig] = useState({});
    const [form, setForm] = useState({});

    const [loading, setLoading] = useState(false);
    const [submitting, setSubmitting] = useState(false);


    useEffect(() => {
        setLoading(true);
        getConfig().then(data => {
            setConfig(data);
            setForm({...data});
            setLoading(false);
        })
    }, []);

    function handleSubmit(event) {

        event.preventDefault();

        setSubmitting(true);
        save(form).then(data => {
            if (data) {
                setForm({...form, id: data});
            }
            setSubmitting(false);
            alert("编排配置保存成功")
        })
    }

    return (
        <Box p={4}>
            <Card raised sx={{padding: 2, boxSizing: 'border-box', width: '920px'}}>
                <CardHeader title={
                    <Stack direction="row" alignItems="center" spacing={1}>
                        <Typography variant="h5">编排配置</Typography>
                        {loading && <CircularProgress color="inherit" size={24}/>}
                    </Stack>
                }/>
                <CardContent>
                    <form onSubmit={handleSubmit}>
                        <Stack spacing={2} direction="column">
                            <Stack spacing={2}>
                                <Typography>工作日可排课时间</Typography>
                                <HourBar hours={form.workdayHour}
                                         onChange={v => setForm({...form, workdayHour: v})}/>
                            </Stack>

                            <Stack spacing={2}>
                                <Typography>节假日可排课时间</Typography>
                                <HourBar hours={form.holidayHour}
                                         onChange={v => setForm({...form, holidayHour: v})}/>
                            </Stack>

                            <Stack spacing={2} direction="row" alignItems="center">
                                <Typography>半整点</Typography>
                                <Switch checked={form.halfHour}
                                        onChange={() => setForm({
                                            ...form, halfHour: !form.halfHour
                                        })}/>
                                <Typography variant="body2" color={'secondary'}>
                                    若开启，可在每个小时的 30 分钟时开始课程；
                                    若关闭，只能在整点时开始课程
                                </Typography>
                            </Stack>

                            <Stack spacing={2} direction="row">
                                <Button
                                    variant="contained"
                                    color="primary"
                                    startIcon={<RestartAlt/>}
                                    sx={{marginTop: "16px", mr: 2}}
                                    onClick={() => setForm({...config})}
                                >还原</Button>

                                <LoadingButton
                                    type="submit"
                                    disabled={submitting}
                                    variant="contained"
                                    color="primary"
                                    startIcon={<Done/>}
                                    sx={{marginTop: "16px"}}
                                    loadingIndicator={<CircularProgress color="inherit" size={24}/>}
                                    loading={submitting}
                                >提交</LoadingButton>
                            </Stack>
                        </Stack>
                    </form>
                </CardContent>
            </Card>
        </Box>
    );
}

export default LessonScheduleConfig;
